<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>群聊详情</span>
                <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click="goBack"
                >返回
                </el-button
                >
            </div>
            <el-descriptions title="" direction="vertical" :column="8" border size="small">
                <el-descriptions-item label="名称">
                    {{ groupChatInfo.name }}
                </el-descriptions-item>
                <el-descriptions-item label="成员数量">
                    {{ groupChatInfo.memberCount }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>
        <el-divider></el-divider>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>群聊成员</span>
            </div>
            <div>
                <el-form ref="searchForm" :inline="true" :model="condition.search" label-suffix="" label-width="100px"
                         size="small" label-position="left">
                    <el-row>
                        <el-col :span=6>
                            <el-form-item label="群成员ID" prop="userid">
                                <el-input v-model="condition.search.userid"
                                          placeholder="群成员ID"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span=6>
                            <el-form-item label="成员类型" prop="type">
                                <el-select v-model="condition.search.type"
                                           placeholder="成员类型">
                                    <el-option label="企业成员"
                                               value="1"></el-option>
                                    <el-option label="外部联系人"
                                               value="2"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span=6>
                            <el-form-item label="入群方式" prop="joinScene">
                                <el-select v-model="condition.search.joinScene"
                                           placeholder="入群方式">
                                    <el-option label="群成员邀请进群"
                                               value="1"></el-option>
                                    <el-option label="群成员邀请链接进群"
                                               value="2"></el-option>
                                    <el-option label="扫描二维码入群"
                                               value="3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span=6>
                            <el-form-item label="邀请者" prop="invitor">
                                <el-input v-model="condition.search.invitor"
                                          placeholder="邀请者"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="primary" @click="getData">查询</el-button>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="reset">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
            <el-table
                size="small"
                id="mainTable"
                :data="groupChatMemberData"
                header-cell-class-name="tableHeaderStyle"
                :row-class-name="tableRowClassName">
                <!--            <el-table-column-->
                <!--                prop="id"-->
                <!--                label="唯一ID">-->
                <!--            </el-table-column>-->
                <el-table-column label="序号" width="60">
                    <template v-slot="scope">
                        <span>{{ (condition.page - 1) * condition.rows + scope.$index + 1 }}</span>
                    </template>
                </el-table-column>
                <!--            <el-table-column-->
                <!--                prop="chatId"-->
                <!--                label="客户群ID">-->
                <!--            </el-table-column>-->
                <el-table-column
                    prop="userid"
                    label="群成员ID">
                </el-table-column>
                <el-table-column
                    prop="type"
                    :formatter="formatType"
                    label="成员类型">
                </el-table-column>
                <el-table-column
                    prop="joinTime"
                    label="入群时间">
                </el-table-column>
                <el-table-column
                    prop="joinScene"
                    :formatter="formatJoinScene"
                    label="入群方式">
                </el-table-column>
                <el-table-column
                    prop="invitor"
                    label="邀请者">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="名字">
                </el-table-column>
                <el-table-column
                    prop="groupNickname"
                    label="群昵称">
                </el-table-column>
                <el-table-column
                    prop="unionId"
                    label="UNION_ID">
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="创建时间">
                </el-table-column>
                <el-table-column
                    prop="updateTime"
                    label="更新时间">
                </el-table-column>
                <el-table-column
                    prop="syncTime"
                    label="同步时间">
                </el-table-column>
            </el-table>
            <el-pagination
                background
                small
                :hide-on-single-page="true"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="condition.page"
                :page-sizes="[10, 20, 30, 40, 50, 100]"
                :page-size.sync="condition.rows"
                layout="sizes, prev, pager, next"
                :total.sync="condition.total">
            </el-pagination>
        </el-card>
    </div>
</template>

<script>
import {getGroupChatById, getWorkGroupChatMemberByPage} from '@/api/api'

export default {
    name: "WorkGroupChatDetail",
    data() {
        return {
            // 分页搜索条件
            condition: {
                page: 1,
                rows: 5,
                total: 0,
                search: {}
            },
            // 表格数据
            groupChatMemberData: [],
            // 群聊详情
            groupChatInfo: {},
            id: '',
        }
    },
    methods: {
        // 这里可以单独设置每一行的样式
        tableRowClassName({row, rowIndex}) {
            return '';
        },
        handleSizeChange(val) {
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        reset: function () {
            this.$refs['searchForm'].resetFields();
        },
        // 格式布尔值
        formatBoolean: function (row, column, cellValue) {
            if (cellValue) {
                return "是";
            } else {
                return "否";
            }
        },
        formatType: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "企业成员";
            } else if (cellValue == '2') {
                return "外部联系人";
            } else {
                return "未知";
            }
        },
        formatJoinScene: function (row, column, cellValue) {
            if (cellValue == '1') {
                return "群成员邀请进群";
            } else if (cellValue == '2') {
                return "群成员邀请链接进群";
            } else if (cellValue == '3') {
                return "扫描二维码入群";
            } else {
                return "未知";
            }
        },
        // 获取表格数据
        getData: function () {
            getGroupChatById({"id": this.id}).then(data => {
                this.groupChatInfo = data.body;
                this.condition.search.chatId = this.groupChatInfo.chatId;
                getWorkGroupChatMemberByPage(this.condition).then(data => {
                    this.groupChatMemberData = data.body.rows;
                    this.condition.total = data.body.total;
                });
            });
        },
        goBack() {
            // 编程式导航
            this.$router.go(-1);
        },
    },
    created() {
        this.id = this.$route.query.id;
        this.getData();
    }
}
</script>

<style scoped>
.el-input {
    width: 150px !important;
}

.el-select {
    width: 150px !important;
}
</style>
